<template>
  <div class="preview">
    <h3 class="d-caption-lead">视图</h3>
    <div class="coder-preview">
      <div ref="previewView" class="preview-view">
        <component :is="viewComp"></component>
      </div>
    </div>
    <h3 class="d-caption-lead">属性</h3>
    <div class="coder-preview">
      <div ref="previewViewProperty" class="preview-view">
        <component :is="propertyComp"></component>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { PanerForm } from '@daelui/vdog/dist/pages.js'
import { Dialoger, FormCalendar, FormSelecter, Tabs, TabsItem } from '@daelui/vdog/dist/components.js'
import coder from '@daelui/dogjs/dist/libs/coder.js'
import tpl from '../page/components/vue/default'
import { state } from '../../../service/stock/index.js'
import vcSer from '../../../service/action/viewcomp.action'

import * as Babel from '@babel/standalone'
const win = typeof self !== 'undefined' ? window : global
win.Babel = Babel

export default {
  components: {
    PanerForm,
    FormCalendar,
    Dialoger,
    FormSelecter,
    Tabs, TabsItem
  },

  data () {
    return {
      activeView: 'first',
      activeProp: 'first',
      viewComp: 'div',
      propertyComp: 'div',
      // 表单数据
      state: {
        id: '',
        text: '',
        name: '',
        type: 'vue',
        mainCode: tpl.code,
        propertyCode: tpl.property,
        description: '',
        version: '1.0.0',
        labels: '',
        status: 1,
        order: 1,
        updateTime: '',
        updateUser: '',
        createTime: '',
        createUser: ''
      },
      // 类型列表
      typeList: state.codeLangTypeList,
      // 状态列表
      statusList: state.statusList
    }
  },

  methods: {
    /**
     * @function 加载数据
    */
    loadItem (id) {
      vcSer.queryItem({ id }).then(result => {
        let data = result.data || {}
        this.state = data
        this.handlePreview()
        this.handlePreviewProperty()
      })
    },
    /**
     * @function 预览
    */
    handlePreview () {
      if (this.state.mainCode) {
        coder.vue.resolve(this.state.mainCode, Vue, $pig).then(cp => {
          this.viewComp = cp
        })
      } else if (this.state.main) {
        $pig.import(this.state.main).then(res => {
          this.viewComp = res.default
        })
      }
    },

    /**
     * @function 预览
    */
    handlePreviewProperty () {
      if (this.state.propertyCode) {
        coder.vue.resolve(this.state.propertyCode, Vue, $pig).then(cp => {
          this.propertyComp = cp
        })
      } else if (this.state.property) {
        $pig.import(this.state.property).then(res => {
          this.propertyComp = res.default
        })
      }
    }
  },

  mounted () {
    let params = this.$route.params
    // 新建
    if (!params.id) {

    } else {
      this.loadItem(params.id)
    }
  }
}
</script>

<style lang="less" scoped>
.preview {
  width: 100%;
}
.coder-paner {
  /deep/.d-paner-item-content {
    height: 500px;
  }
}
.coder-preview {
  overflow: auto;
  height: 536px;
  border-radius: 4px;
}
.preview-view {
  overflow: auto;
  height: 100%;
}
</style>
